<template>
    <view class="page">
        <view class="top_box" :class="'top_box_' + tabbarId">
            <back :title="tabbarId == 1 ? '管理员中心' : tabbarId == 2 ? '提现申请' : tabbarId == 3 ? '我的订单' : '信息审核'"
                :isBack="true" :isBg="false">
            </back>
            <!-- 日期选择 -->
            <view class="DatePicker_box" v-if="tabbarId == 3" @click="dateBtn"></view>
        </view>
        <u-calendar :change-year="false" active-bg-color="rgba(26, 194, 121, 1)" btn-type="success" v-model="dateshow"
            :mode="datemode" @change="dateChange" range-color="rgba(0, 0, 0, 1)" active-color="rgba(255, 255, 255, 1)"
            range-bg-color="rgba(227, 255, 233, 1)" color="rgba(0, 0, 0, 1)" @dateCancel="dateCancel"
            :allBtn="tabbarId">
        </u-calendar>
        <!-- 数据中心 -->
        <template v-if="tabbarId == 1">
            <view class="zonglan_box">
                <view class="top_flex_box">
                    <view class="top_flex_left_box">
                        <view class="l_box"></view>
                        <view class="c_box">数据总览</view>
                        <view class="r_box" @click="dateBtn"></view>
                    </view>
                    <view class="top_flex_right_box">
                        <view class="dange_shaixuan_box" :class="screenId == item.id ? 'dange_shaixuan_sel_box' : ''"
                            v-for="(item, index) in screenList" :key="index" @click="screenBtn(item)">{{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="shujuzhanshiquyu_box">
                    <view class="left_shuju_box">
                        <view class="left_top_bop">
                            <view class="shang_box">
                                总金额(元)
                            </view>
                            <view class="xia_box">
                                {{ statisObj.total_money }}
                            </view>
                        </view>
                        <view class="left_bot_bop">
                            <view class="shang_box">
                                总佣金(元)
                            </view>
                            <view class="xia_box">
                                {{ statisObj.total_commission_money }}
                            </view>
                        </view>
                    </view>
                    <view class="right_shuju_box">
                        <view class="right_top_box">
                            <view class="shang_box">
                                搬运费(元)
                            </view>
                            <view class="xia_box">
                                {{ statisObj.total_vehicle_price }}
                            </view>
                        </view>
                        <view class="right_bot_box">
                            <view class="shang_box">
                                优惠券(元)
                            </view>
                            <view class="xia_box">
                                {{ statisObj.total_credit }}
                            </view>
                        </view>

                    </view>
                </view>
                <view class="liqunjing_box">净利润(元)：{{ statisObj.total_surplus_money }}</view>
            </view>
            <!-- 金额趋势 -->
            <view class="trend_box">
                <view class="top_flex_box">
                    <view class="top_flex_left_box">
                        <view class="l_box"></view>
                        <view class="c_box">金额趋势</view>
                        <!-- <view class="r_box"></view> -->
                    </view>
                    <view class="top_flex_right_box">
                        <view class="dange_shaixuan_box" :class="trendId == item.id ? 'dange_shaixuan_sel_box' : ''"
                            v-for="(item, index) in trendList" :key="index" @click="trendBtn(item)">{{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="trend_bot_box">
                    <view class="element_box">单位：元</view>
                    <view class="echarts_box">
                        <qiun-data-charts :canvas2d='true' :ontouch="true" type="line" :opts="opts"
                            :chartData="chartData" :scrollShow="true" />
                    </view>
                </view>
            </view>
        </template>
        <!-- 提现审核 -->

        <template v-else-if="tabbarId == 2">
            <view class="fenduaqi_box">
                <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
            </view>
            <scroll-view scroll-y class="audit_content_box" v-if="auditList.length > 0" @scrolltolower="auditlower()">
                <view class="audit_dange_top_box" v-for="(item, index) in auditList" :key="index">
                    <view class="audit_dange_box">
                        <view class="audit_dange_left_box">
                            <view class="audit_top_box">
                                <view class="audit_tx_box">
                                    <image :src="item.avatar" mode="scaleToFill" />
                                </view>
                                <view class="niack_box">{{ item.nickname }}</view>
                                <view class="audit_money_box">{{ item.withdraw_money }}</view>
                            </view>
                            <view class="shijian_box">提现时间：{{ item.created_at }}</view>
                            <view class="shijian_box">联系电话：13678909078</view>
                        </view>
                        <view class="audit_dange_right_box" v-if="curNow == '0'"
                            @click="$noMultipleClicks(goeventsin, item)">去审核</view>
                        <view class="audit_dange_right1_box" v-else>已打款</view>

                    </view>
                    <view class="lianggetupian_box">
                        <view class="left_box">
                            收款码：
                            <view class="shouuuanma_box">
                                <image :src="item.img_url" @click="ClickImage(item.img_url)" mode="scaleToFill" />
                            </view>
                        </view>
                        <view class="right_box">
                            <template v-if="item.voucher_url">
                                转账凭证：
                                <view class="zzpz_box">
                                    <image :src="item.voucher_url" @click="ClickImage(item.voucher_url)"
                                        mode="scaleToFill" />
                                </view>
                            </template>
                        </view>
                    </view>
                </view>

                <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                    padding="" :loadTitle="loadTitle"></aLoadMore>
            </scroll-view>
            <view v-else>
                <empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'暂无数据'"></empoy>
            </view>

        </template>
        <!-- 我的订单 -->
        <template v-else-if="tabbarId == 3">
            <!-- 订单选择 -->
            <view class="content" style="margin-bottom: 10px;">
                <view class="dange_sel_box" v-for="(item, index) in tabList" :key="index"
                    @click="tabsClick(item, index)">
                    <text v-if="active != item.id" class="wsel_txt">{{ item.name }}</text>
                    <text v-else class="sel_txt">{{ item.name }}</text>
                    <view class="line_box" v-if="active == item.id"></view>
                </view>
            </view>

            <scroll-view scroll-y class="order_big_box" v-if="orderList.length > 0" @scrolltolower="lower()">
                <view class="dange_order_box" v-for="(item, index) in orderList" :key="index">
                    <view class="orderNum_box">
                        <view class="left_lv_box"></view>
                        <view class="zs_order_num_box">订单编号：{{ item.first_order_sn }}</view>
                    </view>
                    <view class="zc_type_box">
                        <view class="le_box">
                            <view class="cc_box">
                                <image :src="item.product_img" mode="scaleToFill" />
                            </view>
                            <view class="xx_box">
                                <view class="xx_top_box">{{ item.product_name }}</view>
                                <view class="xx_bot_box">
                                    按{{ item.category_name }}拉
                                    <view v-if="item.position_name"
                                        style="width: 8rpx;height: 8rpx;margin: 0 6rpx; border-radius: 50%;background-color: rgba(204, 204, 204, 1);">
                                    </view>
                                    <text v-if="item.position_name">
                                        {{ item.position_name }}
                                    </text>

                                </view>
                            </view>
                        </view>
                        <view class="r_box">
                            <view class="daishu_box">
                                <text style="color:rgba(255, 141, 26, 1);font-size: 20rpx;">¥</text>
                                <text style="font-weight: 700;color:rgba(255, 141, 26, 1);font-size: 36rpx;">{{
            item.product_price }}</text>
                                /{{ item.category_name }}
                            </view>
                            <view class="yg_box">预估{{ item.num * 1 }}{{ item.category_name }}</view>
                        </view>
                    </view>

                    <view class="zclx_box">
                        <view class="xing_box">
                            <text style="margin-right: 14rpx;">{{ item.real_name }}</text> <text>{{ item.phone }}</text>
                        </view>
                        <view class="xing_box">
                            <text style="margin-right: 14rpx;">时间：</text> <text>{{ item.appointment_time }}</text>
                        </view>
                        <view class="dizhi_box">
                            <view>地址：</view>
                            <view class="jt_box">{{ item.location }}</view>
                            <view><u-icon name="map-fill" size="28" color="rgba(166, 166, 166, 1)"></u-icon></view>
                        </view>
                    </view>

                    <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                    </view>


                    <view class="yuyue" v-if="item.category_id == 2">预约车型：{{ item.vehicle_name }}</view>
                    <!-- 待支付 -->
                    <view class="prc_box" v-if="item.status == '1'">
                        <view class="left_trxt_box">待支付定金：<text style="color: rgba(255, 141, 26, 1);">¥{{
            item.first_pay_money }}</text></view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                        <!-- <view class="czbtn1_box" @click="orderCancelBtn(item)"
                            style="border: 2rpx solid rgba(229, 229, 229, 1);color: rgba(56, 56, 56, 1);">取消订单</view> -->
                        <!-- <view class="czbtn1_box" 
                            style="background: rgba(26, 194, 121, 1);color: rgba(255, 255, 255, 1);"></view> -->
                    </view>
                    <!-- 待清运 -->
                    <view class="prc_box" v-if="item.status == '3'">
                        <view class="left_trxt_box">待结清金额：<text style="color: rgba(255, 141, 26, 1);">¥{{
            item.last_pay_money }}</text></view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                        <!-- <view class="czbtn1_box"
                            style="background: rgba(26, 194, 121, 1);color: rgba(255, 255, 255, 1);"></view> -->
                    </view>
                    <!-- 待勘测 -->
                    <view class="prc_box" v-if="item.status == '2'">
                        <view class="left_trxt_box">已付定金：¥{{ item.first_pay_money }}</view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                        <!-- <view class="czbtn1_box"
                            style="border: 2rpx solid rgba(229, 229, 229, 1);color: rgba(56, 56, 56, 1);"></view> -->
                    </view>
                    <!-- 已取消 -->
                    <view class="prc_box" v-if="item.status == '0'">
                        <view class="left_trxt_box" style="color:rgba(54, 41, 125, 1)">订单已取消</view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                    </view>
                    <!-- 已退款 -->
                    <view class="prc_box" v-if="item.status == '-1'">
                        <view class="left_trxt_box">退款成功：¥{{ item.first_pay_money }}
                        </view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                    </view>
                    <!-- 已完成 -->
                    <view class="prc_box" v-if="item.status == '5'">
                        <view class="left_trxt_box">订单总金额：¥{{ item.total_money }}
                        </view>
                        <view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                        <!-- <view class="czbtn1_box" @click="$noMultipleClicks(kanDetail, item)">查看详情</view> -->
                    </view>
                    <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                    </view>
                    <view class="prc_box">
                        <view class="left_trxt_box">
                        </view>
                        <view class="czbtn1_box" @click="$noMultipleClicks(kanDetail, item)">查看详情</view>
                    </view>
                </view>
                <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                    padding="" :loadTitle="loadTitle"></aLoadMore>
            </scroll-view>
            <view v-else>
                <empoy :imageUrl="'https://build.lwjcg.com/uploads/empoy.png'" :kongtext="'您还没有预约订单哦'"></empoy>
                <view class="moreOrder_box" @click="goshop">去下单</view>
            </view>
        </template>
        <!-- 信息审核 -->

        <template v-else-if="tabbarId == 4">
            <view class="fenduaqi_box1">
                <u-subsection :list="list1" :current="curNow1" @change="sectionChange1"></u-subsection>
            </view>
            <scroll-view scroll-y class="message_box" v-if="auditList1.length > 0" @scrolltolower="auditlower1()">
                <view class="dade_box" v-for="(item, index) in auditList1" :key="item.id">
                    <view class="dange_msg_box"   
                    
                    
                    
                    >
                        <view class="left_msg_box">
                            <view class="left_msg_top_box">{{ item.title }}</view>
                            <view class="left_msg_bot_box">
                                <view class="tx_box">
                                    <image :src="item.avatar" mode="scaleToFill" />
                                </view>
                                <view class="left_tx_rt_text_box">
                                    <view class="nNmae_box">
                                        {{ item.nickname }}
                                    </view>
                                    <view class="nTime_box">{{ item.created_at }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="right_msg_box">
                            <image :src="item.img_url" mode="scaleToFill" />
                        </view>
                    </view>
                    <view class="bottom_box">
                        <view>
                            <view class="dianhua_box" style="margin-bottom: 8rpx;">
                                联系电话：{{ item.phone }}
                            </view>
                            <view class="dianhua_box" style="margin-bottom: 20rpx;">
                                地址：{{ item.address }}
                            </view>
                        </view>
                        <view class="call_box" v-if="curNow1 == 0">
                            <view class="lx_box" @click.stop="goDetail(item)">去审核</view>
                        </view>
                        <view class="call_box" v-if="curNow1 == 1" style="background: none;">
                            <view class="lx_box" style="color:rgba(26, 194, 121, 1);">已通过</view>
                        </view>
                        <view class="call_box" v-if="curNow1 == 2" style="background: none;">
                            <view class="lx_box" style="color:rgba(255, 141, 26, 1);">已拒绝</view>
                        </view>

                    </view>

                </view>

                <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                    padding="" :loadTitle="loadTitle"></aLoadMore>
            </scroll-view>
            <view v-else>
                <empoy :imageUrl="'https://build.lwjcg.com/uploads/infomation.png'" :kongtext="'暂无信息'"></empoy>
            </view>

        </template>
        <view style="height: 180rpx;"></view>
        <view class="bottom_tabbar_box">
            <view class="tabbar_box">
                <view class="dange_pic" v-for="(item, index) in tabbarList" :key="index" @click="tabbarBtn(item)">
                    <image :src="item.sel_img" mode="scaleToFill" v-if="tabbarId == item.id" />
                    <image :src="item.img" mode="scaleToFill" v-else />
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {

            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            noClick: true,//防连点
            //数据中心
            dateshow: false,
            datemode: 'range',
            start_time: '',//开始日期
            end_time: '',//结束日期
            tabbarId: 1,//默认显示数据中心
            tabbarList: [
                {
                    id: 1,
                    img: 'https://rubbish.lwjcg.com/static/administrator/center.png',
                    sel_img: 'https://rubbish.lwjcg.com/static/administrator/sel_center.png'
                },
                {
                    id: 4,
                    img: 'https://rubbish.lwjcg.com/static/administrator/msg.png',
                    sel_img: 'https://rubbish.lwjcg.com/static/administrator/sel_msg.png'
                },
                {
                    id: 2,
                    img: 'https://rubbish.lwjcg.com/static/administrator/audit.png',
                    sel_img: 'https://rubbish.lwjcg.com/static/administrator/sel_audit.png'
                },
                {
                    id: 3,
                    img: 'https://rubbish.lwjcg.com/static/administrator/order.png',
                    sel_img: 'https://rubbish.lwjcg.com/static/administrator/sel_order.png'
                },
            ],
            screenList: [
                {
                    id: 1,
                    text: '昨日'
                },
                {
                    id: 2,
                    text: '近30日'
                },
                {
                    id: '',
                    text: '全部'
                },
            ],

            screenId: 1,//默认选中近7日
            statisObj: {},//顶部数据
            categories: [],//x轴
            trendList: [
                {
                    id: 1,
                    text: '近7日'
                },
                {
                    id: 2,
                    text: '近30日'
                }
            ],
            trendId: 1,//默认选中近7日
            chartData: {},
            opts: {
                color: ["rgba(255, 141, 26, 1)"],
                padding: [15, 10, 0, 15],
                enableScroll: true,
                legend: {},
                xAxis: {
                    disableGrid: true,
                    fontSize: 10,
                    itemCount: 7,
                    enableScroll: true,
                    background: 'rgba(247, 247, 247, 1)',
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 1,
                    calibration: true,
                    fontSize: 10,
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 3,
                        // activeType: "hollow"
                    }
                }
            },

            //我的订单
            tabList: [
            ],
            active: -2,//-2全部也是默认
            status: 'all',
            orderList: [],//订单列表
            page: 1,   // 第一页
            flags: true,  // 防抖开关 防止用户不停的下拉


            // 提现
            list: [
                {
                    name: '审核中'
                },
                {
                    name: '已打款'
                }
            ],
            curNow: 0,//0:审核中 1:已打款
            curNow1: 0,//0:审核中 1:已打款
            auditPage: 1,
            auditList: [],//提现列表
            auditPage1: 1,
            auditList1: [],//提现列表
            auditflag: true,  // 防抖开关 防止用户不停的下拉
            auditflag1: true,  // 防抖开关 防止用户不停的下拉
            list1: [
                {
                    name: '待审核'
                },
                {
                    name: '已通过'
                },
                {
                    name: '已拒绝'
                }
            ]
        }
    },
    onReady() {

    },
    onShow() {
        this.getstatis()
        this.getServerData(this.trendId);
        this.auditPage = 1
        this.auditList = []
        this.getWithdraw()
        this.auditPage1 = 1
        this.auditList1 = []
        this.getmanageInfomation()
    },
    methods: {
        goDetail(item) {
            console.log(item)
            uni.navigateTo({
                url: '/userPage/administrator/informadminDetail?id=' + item.id + '&msgCenter=' + true
            })
        },
        /* 数据中心 */
        dateBtn() {
            this.dateshow = true
            this.screenId = '3'
        },
        dateChange(e) {
            this.start_time = e.startDate
            this.end_time = e.endDate
            if (this.tabbarId == '3') {
                this.page = 1
                this.orderList = []
                this.orderInfo();
            } else if (this.tabbarId == '1') {
                this.getstatis()
            }

        },
        dateCancel() {
            this.page = 1
            this.start_time = ''
            this.end_time = ''
            this.dateshow = false
            this.orderInfo()
        },
        tabbarBtn(item) {
            this.tabbarId = item.id
            //等于3的时候请求订单页面的数据
            this.start_time = ''
            this.end_time = ''
            if (this.tabbarId == '3') {
                this.status = 'all'
                this.active = -2
                this.tabSta()
                this.orderInfo()
            } else if (this.tabbarId == '2') {
                this.curNow = 0
                this.auditPage = 1
                this.auditList = []
                this.getWithdraw()
            } else if (this.tabbarId == '4') {
                this.getmanageInfomation()
            }
        },
        screenBtn(item) {
            this.screenId = item.id
            if (item.id != '3') {
                this.start_time = ''
                this.end_time = ''
            }
            this.getstatis()
        },
        trendBtn(item) {
            this.trendId = item.id
            console.log(this.trendId)
            this.getServerData(this.trendId)
        },
        getstatis() {
            let data = {
                flag: this.screenId,
                start_time: this.start_time,
                end_time: this.end_time,
            }
            this.$Request.post(this.$api.administrator.manageStatistics, data).then(res => {
                if (res.code == 200) {
                    this.statisObj = res.data
                }

            })
        },
        ClickImage(PhotoAddress) {
            uni.previewImage({
                urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                current: '', // 当前显示图片的http链接，默认是第一个
                success: function (res) { },
                fail: function (res) { },
                complete: function (res) { },
            })
        },
        getServerData(flag) {
            setTimeout(() => {
                let data = {
                    flag: flag
                }
                console.log(data)
                this.$Request.post(this.$api.administrator.manageLine, data).then(result => {
                    if (result.code == 200) {
                        var categories = Object.keys(result.data)
                        var newcategories = categories.map(item => item.slice(5, 10));
                        console.log(newcategories, 'newcategoriesnewcategoriesnewcategories')
                        var seriesArr = Object.values(result.data)
                        let res = {
                            categories: newcategories,
                            series: [
                                {
                                    name: "金额趋势",
                                    data: seriesArr
                                }
                            ]
                        };
                        this.chartData = JSON.parse(JSON.stringify(res));
                    }

                })
            }, 500);
        },

        /*我的订单*/
        goshop() {
            uni.switchTab({ url: '/pages/index/index' })
        },
        tabsClick(item, index) {
            this.page = 1
            this.orderList = []
            this.active = item.id
            this.status = item.id
            this.orderInfo()
        },
        tabSta() {
            this.$Request.post(this.$api.order.orderStatus).then(res => {
                if (res.code == 200) {
                    var tabList = []
                    tabList = res.data
                    tabList.unshift({ id: -2, name: '全部' })
                    this.tabList = tabList
                }


            })
        },
        lower() {
            if (this.flags) {
                this.orderInfo();
            } else {
                this.loadStatus = 'normal'
            }

        },
        orderInfo() {//订单列表
            if (this.status == -2) {
                this.status = 'all'
            }
            let data = {
                status: this.status,
                page: this.page,
                start_time: this.start_time,
                end_time: this.end_time,
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.administrator.manageOrder, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var orderList = res.data.data;
                    this.page++;
                    this.orderList = this.orderList.concat(orderList);
                    if (orderList.length < 20) {
                        this.loadStatus = 'normal'
                        this.flags = false
                    } else {
                        this.flags = true
                    }
                }

            })

        },
        // // 取消订单
        // orderCancelBtn(item) {
        // 	uni.showModal({
        // 		title: '确定取消订单？',
        // 		content: '',
        // 		showCancel: true,
        // 		success: (res) => {
        // 			if (res.confirm) {
        // 				let data = {
        // 					order_id: item.id
        // 				}
        // 				this.$Request.post(this.$api.order.orderCancel, data).then(res => {
        // 					uni.showToast({
        // 						title: '取消成功',
        // 						icon: 'none'
        // 					})
        // 					setTimeout(() => {
        // 						this.active = 0
        // 						this.status = 0
        // 						this.orderList = []
        // 						this.orderInfo()
        // 					}, 600)
        // 				})
        // 			} else if (res.cancel) {
        // 				console.log('取消')
        // 			}
        // 		}
        // 	})

        // },
        // // 申请退款
        // drawback(item) {
        //     uni.showModal({
        //         title: '确定取消订单？',
        //         content: '',
        //         showCancel: true,
        //         success: (res) => {
        //             if (res.confirm) {
        //                 let data = {
        //                     order_id: item.id
        //                 }
        //                 this.$Request.post(this.$api.order.orderRefund, data).then(res => {
        //                     uni.showToast({
        //                         title: '申请成功',
        //                         icon: 'none'
        //                     })
        //                     setTimeout(() => {
        //                         this.active = -1
        //                         this.status = -1
        //                         this.orderList = []
        //                         this.orderInfo()
        //                     }, 600)
        //                 })
        //             } else if (res.cancel) {
        //                 console.log('取消')
        //             }
        //         }
        //     })
        // },
        // // 去结清
        // goDetail(item) {
        //     uni.navigateTo({
        //         url: '/pages/word/institutedetail?order_id=' + item.id + '&pay_status=' + this.status + '&subId=' + this.active
        //     })
        // },
        // 查看详情
        kanDetail(item) {
            uni.navigateTo({
                url: '/orderPage/institutedetail?order_id=' + item.id + '&pay_status=' + this.status + '&subId=' + this.active + '&admin=' + 1
            })
        },
        lookDetail(item) {

            let data = {
                order_id: item.id,
                category_id: item.category_id,
                position_id: item.position_id,
                product_id: item.product_id,
                num: item.num * 1,
                waste_id: item.waste_id,
                coupon_list_id: item.coupon_list_id,
                address_id: item.address_id,
                appointment_time: item.appointment_time,
                vehicle_id: item.vehicle_id
            }
            // console.log(data)
            this.$Request.post(this.$api.order.orderAdd, data).then(res => {
                if (res.code == 200) {
                    this.Payment(res.data)
                }

            })
        },
        // 拉起支付
        Payment(pay_data) {
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: pay_data.timeStamp.toString(),
                nonceStr: pay_data.nonceStr,
                signType: 'MD5',
                package: pay_data.package,
                paySign: pay_data.paySign,
                success(res) {
                    console.log(res)
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/orderPage/successful/successful'
                        })
                    }, 1000)
                },
                fail(err) {
                    console.log(err)
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        this.active = '1'
                    }, 1000)
                }
            })
        },
        // 提现
        sectionChange(index) {
            this.curNow = index;
            this.auditPage = 1
            this.auditList = []
            this.getWithdraw()
        },
        // 提现
        sectionChange1(index) {

            this.curNow1 = index;
            this.auditPage1 = 1
            this.auditList1 = []
            this.getmanageInfomation()
        },
        getmanageInfomation() {
            let data = {
                status: this.curNow1,
                page: this.auditPage1
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.user.manageInfomation, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var auditList = res.data.infomations;
                    this.auditPage1++;
                    this.auditList1 = this.auditList1.concat(auditList);
                    console.log(this.auditList1, "this.auditList1")
                    if (auditList.length < 20) {
                        this.auditflag1 = false
                    } else {
                        this.auditflag1 = true
                    }
                }
            })
        },
        getWithdraw() {

            let data = {
                status: this.curNow,
                page: this.auditPage
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.administrator.manageWithdraw, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var auditList = res.data.withdraw;
                    this.auditPage++;
                    this.auditList = this.auditList.concat(auditList);
                    if (auditList.length < 20) {
                        this.auditflag = false
                    } else {
                        this.auditflag = true
                    }
                }
            })
        },
        auditlower() {
            if (this.auditflag) {
                this.getWithdraw();
            } else {
                this.loadStatus = 'normal'
            }
        },
        auditlower1() {
            if (this.auditflag1) {
                this.getWithdraw();
            } else {
                this.loadStatus = 'normal'
            }
        },
        goeventsin(item) {
            uni.navigateTo({
                url: '/userPage/administrator/withdrawal?withdraw_id=' + item.id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.u-icon__icon {
    color: rgba(54, 66, 80, 1) !important;
}

/deep/.u-calendar__bottom__choose {
    display: none !important;
}

/deep/.u-calendar__action__text {
    color: rgba(26, 194, 121, 1) !important;
}

/deep/.u-calendar__content__bg-month {
    display: none !important;
}

/deep/.u-calendar__header__text {
    color: rgba(0, 0, 0, 1) !important;
}

/deep/.u-drawer {
    z-index: 9999999999999999999 !important;
}

/deep/.u-hover-class {
    opacity: .2 !important;
}


::-webkit-scrollbar {
    display: none;
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);
    position: relative;

    .top_box {
        width: 750rpx;
        height: 180rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(198, 245, 207, 0) 100%);
        margin-bottom: 20rpx;
        position: relative;

        &.top_box_3 {
            background: rgba(255, 255, 255, 1);
            margin-bottom: 0;
        }

        .DatePicker_box {
            position: absolute;
            width: 42.85rpx;
            height: 42.86rpx;
            background-image: url('https://rubbish.lwjcg.com/static/administrator/rl.png');
            background-size: 100%;
            left: 120rpx;
            top: 110rpx;

        }
    }

    // 数据中心
    .zonglan_box {
        width: 700rpx;
        height: 560rpx;
        border-radius: 26rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 26rpx;
        margin-bottom: 20rpx;

        .top_flex_box {
            width: 100%;
            height: 60rpx;
            box-sizing: border-box;
            padding-right: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 54rpx;

            .top_flex_left_box {
                width: 300rpx;
                height: 60rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .l_box {
                    width: 15rpx;
                    height: 36.43rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 28rpx;

                }

                .c_box {
                    height: 49.29rpx;
                    font-size: 34.29rpx;
                    font-weight: 700;
                    letter-spacing: 0rpx;
                    line-height: 48rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-right: 18rpx;

                }

                .r_box {
                    width: 42.85rpx;
                    height: 42.86rpx;
                    opacity: 1;
                    background-image: url('https://rubbish.lwjcg.com/static/administrator/rl.png');
                    background-size: 100%;

                }
            }

            .top_flex_right_box {
                width: 300rpx;
                height: 52rpx;
                border-radius: 12.86rpx;
                background: rgba(243, 243, 244, 1);
                box-sizing: border-box;
                padding: 0 12rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .dange_shaixuan_box {
                    padding: 0 12rpx;
                    height: 36rpx;
                    /** 文本1 */
                    font-size: 26rpx;
                    font-weight: 500;
                    line-height: 36rpx;
                    color: rgba(128, 128, 128, 1);

                    &.dange_shaixuan_sel_box {
                        background: rgba(255, 255, 255, 1);
                        color: rgba(0, 0, 0, 1);
                        font-weight: 600;
                    }


                }

            }
        }

        .shujuzhanshiquyu_box {
            width: 100%;
            height: 304rpx;
            box-sizing: border-box;
            padding: 0 100rpx;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30rpx;

            .left_shuju_box {
                width: 220rpx;
                height: 304rpx;

                .left_top_bop {
                    width: 100%;
                    height: 130rpx;
                    margin-bottom: 54rpx;
                    // background-color: red;

                    .shang_box {
                        height: 45rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 32.14rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 45rpx;
                        color: rgba(56, 56, 56, 1);
                        margin-bottom: 28rpx;

                    }

                    .xia_box {
                        height: 55.71rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 38.57rpx;
                        font-weight: 500;
                        letter-spacing: 0rpx;
                        line-height: 54rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }

                .left_bot_bop {
                    width: 100%;
                    height: 130rpx;

                    .shang_box {
                        height: 45rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 32.14rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 45rpx;
                        color: rgba(56, 56, 56, 1);
                        margin-bottom: 28rpx;

                    }

                    .xia_box {
                        height: 55.71rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 38.57rpx;
                        font-weight: 500;
                        letter-spacing: 0rpx;
                        line-height: 54rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }
            }

            .right_shuju_box {
                width: 220rpx;
                height: 304rpx;

                .right_top_box {
                    width: 100%;
                    height: 130rpx;
                    margin-bottom: 54rpx;

                    .shang_box {
                        height: 45rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 32.14rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 45rpx;
                        color: rgba(56, 56, 56, 1);
                        margin-bottom: 28rpx;

                    }

                    .xia_box {
                        height: 55.71rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 38.57rpx;
                        font-weight: 500;
                        letter-spacing: 0rpx;
                        line-height: 54rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }

                .right_bot_box {
                    width: 100%;
                    height: 130rpx;

                    .shang_box {
                        height: 45rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 32.14rpx;
                        font-weight: 600;
                        letter-spacing: 0rpx;
                        line-height: 45rpx;
                        color: rgba(0, 0, 0, 1);
                        margin-bottom: 28rpx;

                    }

                    .xia_box {
                        height: 55.71rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 38.57rpx;
                        font-weight: 600;
                        letter-spacing: 0rpx;
                        line-height: 54rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }
            }
        }

        .liqunjing_box {
            height: 60rpx;
            width: 100%;
            line-height: 60rpx;
            box-sizing: border-box;
            padding-left: 90rpx;
            font-size: 36rpx;
            font-weight: 600;
            color: rgba(255, 141, 26, 1);
        }

    }

    //提现审核
    .fenduaqi_box {
        width: 700rpx;
        height: 80rpx;
        opacity: 1;
        border-radius: 10rpx;
        margin: auto;
        // margin-bottom: 20rpx;

    }

    .audit_content_box {
        width: 100%;
        height: calc(100vh - 478rpx);
        background-color: rgba(246, 246, 246, 1);

        .audit_dange_top_box {

            width: 700rpx;
            height: 465rpx;
            background: rgba(255, 255, 255, 1);
            border: 2rpx solid rgba(245, 245, 245, 1);
            margin: auto;
            margin-bottom: 20rpx;
            border-radius: 26rpx;

            .audit_dange_box {
                width: 700rpx;
                // height: 100rpx;
                box-sizing: border-box;
                padding-top: 44rpx;
                padding-left: 32rpx;
                padding-right: 32rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;

                .audit_dange_left_box {
                    width: 400rpx;
                    height: 100%;

                    .audit_top_box {
                        width: 100%;
                        height: 76rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: 24rpx;

                        .audit_tx_box {
                            width: 76rpx;
                            height: 76rpx;
                            border-radius: 50%;
                            margin-right: 12rpx;

                            image {
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                            }
                        }

                        .niack_box {
                            width: 100rpx;
                            height: 42rpx;
                            font-size: 32rpx;
                            font-weight: 700;
                            letter-spacing: 0rpx;
                            line-height: 44.8rpx;
                            color: rgba(0, 0, 0, 1);
                            text-align: left;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            margin-right: 30rpx;

                        }

                        .audit_money_box {
                            height: 51.2rpx;
                            opacity: 1;
                            font-size: 40rpx;
                            font-weight: 700;
                            letter-spacing: 0rpx;
                            line-height: 56rpx;
                            color: rgba(0, 0, 0, 1);
                            text-align: left;

                        }

                    }

                    .shijian_box {
                        height: 32rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 24rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 33.6rpx;
                        color: rgba(128, 128, 128, 1);
                        text-align: left;
                        margin-bottom: 18rpx;

                    }
                }

                .audit_dange_right_box {

                    width: 134rpx;
                    height: 56rpx;
                    text-align: center;
                    line-height: 56rpx;
                    opacity: 1;
                    border-radius: 12rpx;
                    background: rgba(26, 194, 121, 1);
                    font-size: 24rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);

                }

                .audit_dange_right1_box {

                    width: 134rpx;
                    height: 56rpx;
                    text-align: center;
                    line-height: 56rpx;
                    border-radius: 12rpx;
                    font-size: 24rpx;
                    font-weight: 700;
                    color: black;

                }

            }
        }

        .lianggetupian_box {
            width: 636rpx;
            height: 200rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;


            .left_box {
                width: 42%;
                height: 200rpx;
                // background-color: red;
                position: relative;

                .shouuuanma_box {
                    position: absolute;
                    right: 0;
                    top: 10rpx;
                    width: 143.96rpx;
                    height: 176.47rpx;
                    border-radius: 9.29rpx;
                    border: 4.64rpx solid rgba(26, 194, 121, 1);

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 9.29rpx;
                    }


                }
            }

            .right_box {
                width: 44%;
                height: 200rpx;
                // background-color: aqua;
                position: relative;

                .zzpz_box {
                    position: absolute;
                    right: 0;
                    top: 10rpx;
                    width: 143.96rpx;
                    height: 176.47rpx;
                    border-radius: 9.29rpx;
                    border: 4.64rpx solid rgba(26, 194, 121, 1);
                }

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 9.29rpx;
                }
            }
        }



    }

    //提现审核
    .fenduaqi_box1 {
        width: 700rpx;
        height: 80rpx;
        opacity: 1;
        border-radius: 10rpx;
        margin: auto;
        // margin-bottom: 20rpx;

    }


    .message_box {
        width: 100%;
        height: calc(100vh - 478rpx);
        background-color: rgba(246, 246, 246, 1);

        .dade_box {
            border-radius: 20rpx;
            background: rgba(255, 255, 255, 1);

            width: 692rpx;
            margin: auto;
            margin-bottom: 20rpx;
            position: relative;
        }

        .dange_msg_box {
            box-sizing: border-box;
            padding: 24rpx 26rpx;
            width: 100%;
            border-radius: 20rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            // align-items: center;

            .left_msg_box {
                width: 396rpx;

                .left_msg_top_box {
                    width: 396rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(34, 34, 34, 0.9);
                    text-align: left;
                    margin-bottom: 20rpx;
                }

                .left_msg_bot_box {
                    width: 100%;
                    height: 60rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        margin-right: 8rpx;

                        image {
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                        }
                    }

                    .left_tx_rt_text_box {
                        height: 60rpx;
                        margin-right: 20rpx;

                        .nNmae_box {
                            height: 34rpx;
                            font-size: 24rpx;
                            font-weight: 500;
                            line-height: 34rpx;
                            color: rgba(56, 56, 56, 1);
                            text-align: left;

                        }

                        .nTime_box {
                            height: 38rpx;
                            font-size: 26rpx;
                            font-weight: 400;
                            line-height: 38rpx;
                            color: rgba(194, 194, 194, 1);
                            text-align: left;

                        }
                    }

                    .edit_box {
                        width: 38rpx;
                        height: 38rpx;
                        background-image: url('https://rubbish.lwjcg.com/static/index/bbj.png');
                        background-size: 100% 100%;

                    }
                }

            }

            .right_msg_box {
                width: 194rpx;
                height: 166rpx;
                border-radius: 20rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx;
                }
            }
        }

        .bottom_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 26rpx;

            .dianhua_box {
                width: 438rpx;
                height: 38rpx;
                /** 文本1 */
                font-size: 26rpx;
                font-weight: 400;
                line-height: 38rpx;
                color: rgba(100, 100, 100, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
        }


        .call_box {
            width: 144rpx;
            height: 60rpx;
            border-radius: 12rpx;
            background: rgba(26, 194, 121, 1);
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20rpx;

            .lx_box {
                width: 100%;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(255, 255, 255, 1);
                text-align: center;

            }

        }
    }



    //订单
    .content {
        width: 100%;
        height: 92rpx;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: auto;

        .dange_sel_box {
            margin-right: 10rpx;
            width: 100rpx;
            height: 94rpx;
            flex-shrink: 0;
            line-height: 94rpx;
            text-align: center;
            position: relative;

            .wsel_txt {
                font-size: 30rpx;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
            }

            .sel_txt {
                font-size: 32rpx;
                font-weight: 600;
                color: rgba(0, 0, 0, 1);
            }

            .line_box {
                width: 76rpx;
                height: 3.93rpx;
                background: rgba(26, 194, 121, 1);
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;

            }

        }
    }

    .order_big_box {
        width: 100%;
        height: calc(100vh - 468rpx);

        .dange_order_box {
            width: 700rpx;
            // height: 628rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .zc_type_box {
                width: 100%;
                height: 154rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .le_box {
                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 34rpx;

                    .cc_box {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                        background-color: #e8fcee;
                        margin-right: 22rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .xx_box {
                        height: 88rpx;

                        .xx_top_box {
                            width: 180rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                        }

                        .xx_bot_box {
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }
                }

                .r_box {

                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .daishu_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: rgba(0, 0, 0, 1);
                    }

                    .yg_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 92rpx;
                        color: rgba(0, 0, 0, 1);
                    }
                }
            }

            .zclx_box {
                width: 100%;
                height: 204rpx;
                box-sizing: border-box;
                padding-left: 36rpx;
                padding-top: 32rpx;

                .xing_box {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-bottom: 16rpx;
                }

                .dizhi_box {
                    width: 100%;
                    height: 40rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .jt_box {
                        width: 436rpx;
                        margin-left: 10rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                    }
                }
            }

            .yuyue {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                box-sizing: border-box;
                padding-left: 34rpx;
                font-size: 28rpx;
                // font-weight: 500;
                color: rgba(0, 0, 0, 1);
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            }

            .prc_box {
                width: 100%;
                height: 100rpx;
                box-sizing: border-box;
                padding: 0 24rpx 0 32rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left_trxt_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                }

                .left_trxt1_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    margin-right: 50rpx;
                }

                .czbtn_box {
                    width: 220rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }

                .czbtn1_box {
                    width: 168rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 52rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }
            }

        }
    }

    .moreOrder_box {
        width: 260rpx;
        height: 80rpx;
        border-radius: 18rpx;
        border: 2rpx solid rgba(26, 194, 121, 1);
        line-height: 80rpx;
        text-align: center;
        margin: auto;
        margin-top: 68rpx;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 76rpx;
        color: rgba(26, 194, 121, 1);


    }

    .trend_box {
        width: 700rpx;
        height: 820rpx;
        border-radius: 27.86rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 26rpx;

        .top_flex_box {
            width: 100%;
            height: 60rpx;
            box-sizing: border-box;
            padding-right: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 54rpx;

            .top_flex_left_box {
                width: 300rpx;
                height: 60rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .l_box {
                    width: 15rpx;
                    height: 36.43rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 28rpx;

                }

                .c_box {
                    height: 49.29rpx;
                    font-size: 34.29rpx;
                    font-weight: 700;
                    letter-spacing: 0rpx;
                    line-height: 48rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-right: 18rpx;

                }

                .r_box {
                    width: 42.85rpx;
                    height: 42.86rpx;
                    opacity: 1;
                    background-image: url('https://rubbish.lwjcg.com/static/administrator/rl.png');
                    background-size: 100%;

                }
            }

            .top_flex_right_box {
                width: 220rpx;
                height: 52rpx;
                border-radius: 12.86rpx;
                background: rgba(243, 243, 244, 1);
                box-sizing: border-box;
                padding: 0 12rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .dange_shaixuan_box {
                    padding: 0 12rpx;
                    height: 36rpx;
                    /** 文本1 */
                    font-size: 26rpx;
                    font-weight: 500;
                    line-height: 36rpx;
                    color: rgba(128, 128, 128, 1);

                    &.dange_shaixuan_sel_box {
                        background: rgba(255, 255, 255, 1);
                        color: rgba(0, 0, 0, 1);
                        font-weight: 600;
                    }


                }

            }
        }

        .trend_bot_box {
            height: 650rpx;
            width: 660rpx;
            background: rgba(247, 247, 247, 1);
            margin: auto;
            box-sizing: border-box;
            padding-top: 26rpx;

            .element_box {
                width: 100%;
                height: 36rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 25.71rpx;
                font-weight: 400;
                line-height: 36rpx;
                color: rgba(0, 0, 0, 1);
                text-align: left;
                box-sizing: border-box;
                padding-left: 18rpx;

            }

            .echarts_box {
                width: 100%;
                height: 600rpx;
            }
        }
    }

    .bottom_tabbar_box {
        width: 750rpx;
        height: 168rpx;
        background-color: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 0;
        left: 0;

        .tabbar_box {
            width: 100%;
            height: 100rpx;
            padding: 0 75rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .dange_pic {
                width: 96rpx;
                height: 76rpx;



                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .dange_pic:nth-child(4) {
                width: 50rpx;
                height: 76rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

}
</style>